<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Book TodoList</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .book-list {
            list-style-type: none;
            padding: 0;
        }

        .book-list li {
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .book-list li:hover {
            background-color: #f5f5f5;
        }

        .book-actions {
            float: right;
        }

        .book-count {
            margin-top: 20px;
            font-size: 1.2em;
        }
    </style>
    <script>
        window.onload = function () {
            var app = new Vue({
                el: '#app',
                data: {
                    books: [
                        { "id": 5, "code": "000001", "bookname": "DK博物大百科", "price": 30, "imghref": "W9IXaQAxqbKt2j9Hev3KC6va.jpg", "auth": "未知", "typeid": 10, "isshelf": 0, "typeInfo": { "typename": 'html相关', "typeid": 10, "createTime": new Date() } },
                        { "id": 6, "code": "000002", "bookname": "断舍离", "price": 30, "imghref": "s6KTbqPG7wdgPN8mFVD-9S0B.jpg", "auth": "未知", "typeid": 10, "isshelf": 0 },
                        { "id": 6, "code": "000002", "bookname": "断舍离", "price": 30, "imghref": "s6KTbqPG7wdgPN8mFVD-9S0B.jpg", "auth": "未知", "typeid": 10, "isshelf": 0 },
                        { "id": 7, "code": "000003", "bookname": "画给孩子的中国历史", "price": 20, "imghref": "V7YS7ImmkjJ5NOvC-dg2n2rq.jpg", "auth": "未知", "typeid": 10, "isshelf": 0 },
                        { "id": 8, "code": "000004", "bookname": "活着", "price": 30, "imghref": "KBEX1oeXtqZ6BoNSRg-K-N4W.jpg", "auth": "未知", "typeid": 10, "isshelf": 0 },
                        { "id": 9, "code": "000005", "bookname": "局外人", "price": 30, "imghref": "FGuPZguqDU3cnaReTP4_Xnwt.jpg", "auth": "未知", "typeid": 10, "isshelf": 0 }
                    ],
                    newBook: {
                        id: null,
                        code: '',
                        bookname: '',
                        price: '',
                        imghref: '',
                        auth: '未知',
                        typeid: 10,
                        isshelf: 0,
                        typeInfo: { typename: 'html相关', typeid: 10, createTime: new Date() }
                    },
                    editBookIndex: null
                },
                computed: {
                    bookCount() {
                        return this.books.length;
                    }
                },
                methods: {
                    addBook() {
                        this.newBook.id = Date.now();
                        this.books.push({ ...this.newBook });
                        this.newBook = {
                            id: null,
                            code: '',
                            bookname: '',
                            price: '',
                            imghref: '',
                            auth: '未知',
                            typeid: 10,
                            isshelf: 0,
                            typeInfo: { typename: 'html相关', typeid: 10, createTime: new Date() }
                        };
                    },
                    deleteBook(index) {
                        this.books.splice(index, 1);
                    },
                    editBook(index) {
                        this.editBookIndex = index;
                        this.newBook = { ...this.books[index] };
                    },
                    updateBook() {
                        if (this.editBookIndex !== null) {
                            this.$set(this.books, this.editBookIndex, { ...this.newBook });
                            this.editBookIndex = null;
                            this.newBook = {
                                id: null,
                                code: '',
                                bookname: '',
                                price: '',
                                imghref: '',
                                auth: '未知',
                                typeid: 10,
                                isshelf: 0,
                                typeInfo: { typename: 'html相关', typeid: 10, createTime: new Date() }
                            };
                        }
                    }
                }
            });
        }
    </script>
</head>

<body>
    <div id="app">
        <h1>Book TodoList</h1>
        <div class="book-count">当前图书数量: {{ bookCount }}</div>
        <ul class="book-list">
            <li v-for="(book, index) in books" :key="book.id">
                <span>{{ book.bookname }} - {{ book.auth }} - ¥{{ book.price }}</span>
                <div class="book-actions">
                    <button @click="editBook(index)">编辑</button>
                    <button @click="deleteBook(index)">删除</button>
                </div>
            </li>
        </ul>
        <h2>添加/编辑图书</h2>
        <form @submit.prevent="editBookIndex === null ? addBook() : updateBook()">
            <div>
                <label for="bookname">书名:</label>
                <input type="text" v-model="newBook.bookname" id="bookname" required>
            </div>
            <div>
                <label for="auth">作者:</label>
                <input type="text" v-model="newBook.auth" id="auth" placeholder="未知">
            </div>
            <div>
                <label for="price">价格:</label>
                <input type="number" v-model="newBook.price" id="price" required>
            </div>
            <div>
                <label for="imghref">图片链接:</label>
                <input type="text" v-model="newBook.imghref" id="imghref">
            </div>
            <button type="submit">{{ editBookIndex === null ? '添加图书' : '更新图书' }}</button>
            <button type="button" @click="editBookIndex === null ? '' : editBookIndex = null">取消</button>
        </form>
    </div>
</body>

</html>